import React, { Component } from 'react'

import {Spring, config} from 'react-spring/renderprops'

import FilterFooter from '../../../../components/FilterFooter'

import styles from './index.module.css'
import classNames from 'classnames'

export default class FilterMore extends Component {
  state = {
    values: this.props.defaultValues,
    isShow: true
  }
  handleSelect = val => {
    // 判断values中是否有该项值，有删除，没有添加
    const {values} = this.state
    let newValues
    if(values.indexOf(val) > -1) {
      newValues = values.filter(item => item !== val)
    } else {
      newValues = [...values, val]
    }
    this.setState({
      values: newValues
    })
  }
  // 渲染标签
  renderFilters(data) {
    // 高亮类名： styles.tagActive
    // return (
    //   <span className={[styles.tag, styles.tagActive].join(' ')}>东北</span>
    // )
    return (
      data.map(item => {
        return (
          <span
            key={item.value}
            className={classNames(styles.tag, {[styles.tagActive]: this.state.values.indexOf(item.value) > -1})}
            onClick={() => this.handleSelect(item.value)}>
            {item.label}
          </span>
        )
      })
    )
  }
  handleClose = () => {
    this.setState({isShow: false})
    this.props.onClose()
    // this.props.checkIsFixed()
  }
  renderMask() {
    return (
      <Spring config={config.slow} from={{ opacity: 0}} to={{ opacity: this.state.isShow ? 1 : 0}}>
        {
          props => {
            // console.log(props.opacity);
            if(!props.opacity) return null
            return <div style={props} className={styles.mask} onClick={this.handleClose} />
          }
        }
      </Spring>
    )
  }
  render() {
    const { onSave, data: { roomType, oriented, floor, characteristic } } = this.props
    // console.log(roomType, oriented, floor, characteristic)
    return (
      <div className={styles.root}>
        {/* 遮罩层 */}
        {this.renderMask()}
        {/* 条件内容 */}
        <Spring
          config={config.slow}
          from={{ transform: 'translateX(295px)' }}
          to={{ transform: this.state.isShow ? 'translateX(0px)' : 'translateX(295px)'}}>
          {props => {
            if (props.transform === 'translateX(295px)') return null
            return (
              <>
                <div style={props} className={styles.tags}>
                  <dl className={styles.dl}>
                    <dt className={styles.dt}>户型</dt>
                    <dd className={styles.dd}>{this.renderFilters(roomType)}</dd>

                    <dt className={styles.dt}>朝向</dt>
                    <dd className={styles.dd}>{this.renderFilters(oriented)}</dd>

                    <dt className={styles.dt}>楼层</dt>
                    <dd className={styles.dd}>{this.renderFilters(floor)}</dd>

                    <dt className={styles.dt}>房屋亮点</dt>
                    <dd className={styles.dd}>{this.renderFilters(characteristic)}</dd>
                  </dl>
                </div>
                {/* 底部按钮 */ }
                <FilterFooter
                  style={props}
                  className={styles.footer}
                  cancelText="清除"
                  onCancel={() => this.setState({ values: [] })}
                  onOk={() => onSave(this.state.values)}
                />
              </>
            )
          }}
        </Spring>
        
      </div>
    )
  }
}
